<div class="problem-container" *ngIf="activeFeature === 'problem' && problem">
  <h2>{{ problem.id }}. {{ problem.title }}</h2>
  <div [innerHTML]="problem.description"></div>
</div>

<div class="ai-assistant-container" *ngIf="activeFeature === 'ai'">
  <div class="chat-header">
    <h2>AI Assistant</h2>
  </div>

  <div class="chat-messages" #chatMessages>
    <div *ngFor="let message of chatHistory" [ngClass]="message.role">
      <div class="message-bubble">
        <markdown [data]="message.text"></markdown>
      </div>
    </div>
  </div>

  <div class="loading-spinner" *ngIf="isLoading">
    <div class="spinner"></div>
  </div>

  <div class="chat-input">
    <input
      type="text"
      [(ngModel)]="userInput"
      (keydown.enter)="sendAIMessage()"
      placeholder="Ask something..."
    />
    <button (click)="sendHintMessage()">一键提示</button>
    <button (click)="sendCorrectCodeMessage()">代码纠错</button>
  </div>
</div>

<div class="room-collab-container" *ngIf="activeFeature === 'room'">
  <h3>房间操作</h3>

  <!-- 房间未加入状态 -->
  <div *ngIf="!inRoom">
    <input [(ngModel)]="roomId" placeholder="请输入6位房间号" maxlength="6" />
    <div class="room-buttons">
      <button (click)="createRoom()">创建房间</button>
      <button (click)="joinRoom()">加入房间</button>
    </div>
    <div *ngIf="roomMessage" class="room-message">{{ roomMessage }}</div>
  </div>

  <!-- 已加入房间状态 -->
  <div *ngIf="inRoom">
    <div class="room-info">
      <p>当前房间号：{{ roomId }}</p>
      <button (click)="leaveRoom()">退出房间</button>
    </div>

    <!-- 聊天区 -->
    <div class="chat-box">
      <div class="messages">
        <div
          *ngFor="let msg of userChatMessages; let i = index"
          [ngClass]="{
            'message-user': user_chat_messages_type[i] === 'user',
            'message-other': user_chat_messages_type[i] !== 'user'
          }"
        >
          {{ msg }}
        </div>
      </div>

      <div class="chat-input">
        <input
          [(ngModel)]="newMessage"
          placeholder="输入消息..."
          (keydown.enter)="sendUserMessage()"
        />
        <button (click)="sendUserMessage()">发送</button>
      </div>
    </div>
  </div>
</div>

<div *ngIf="activeFeature === 'video'">
  <app-video></app-video>
</div>
